<template>
  <view class="brandDriving-page">
    <u-loading-page loading v-if="hasLoading"></u-loading-page>
    <u-swiper :list="oneBannerList" keyName="image" :height="280" :radius="0" @click="clickSwiper"></u-swiper>
    <!-- 搜索 -->
    <view class="flex-center align-center" style="position: absolute; top: 100rpx">
      <view class="search-simulate justify-b" @tap="$u.route('pages/shop/classify')">
        <view class="flex align-center">
          <view class="cuIcon-search"></view>
          <view class="m-l-10">洗衣机</view>
        </view>
        <view class="line">搜索</view>
      </view>
    </view>
    <!-- 菜单1 -->
    <view class="about-shadow relative">
      <u-grid :col="col" :border="false">
        <u-grid-item v-for="(item, index) in merchantServices" :key="index" @click="jumpTo(item)">
          <view style="width: 90rpx; height: 90rpx">
            <image :src="item.icon" style="width: 90rpx; height: 90rpx"></image>
          </view>
          <view class="m-t-20">
            {{ item.title }}
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 9.9 -->
    <u-swiper :list="twoBannerList" keyName="image" :height="112" :radius="0" @click="clickSwiper1" style="width: 700rpx; margin: 0 auto"></u-swiper>
    <!-- 麦当劳肯德基 -->
    <view class="zaiXian">
      <template v-for="(item, index) in threeBannerList">
        <image v-if="index < 2" :src="item.image" style="width: 290rpx; height: 240rpx" @click="clickSwiper2(index)"> </image>
      </template>
    </view>
    <!-- 菜单2 -->
    <view class="menu2">
      <u-swiper :list="fourBannerList" keyName="image" :height="227" @click="clickSwiper3" style="width: 344rpx"></u-swiper>
      <view class="menu2-right">
        <view v-for="(item, index) in fiveBannerList" :key="index" @click="clickSwiper4(index)">
          <image :src="item.image" style="width: 344rpx; height: 141rpx"></image>
        </view>
      </view>
    </view>
    <!-- 在线点餐 -->
    <view class="dian-can">
      <image class="dian-can-item" :src="item.image" v-for="(item, index) in sixBannerList" :key="index" @click="clickSwiper5(index)"></image>
    </view>

    <u-sticky customNavHeight="0">
      <view class="jtt-title">
        <view class="flex align-center justify-e m-t-30">
          <view class="jtt-title-search" @tap="$u.route('/jkdPages/catalogue/catalogue')">
            <u-icon name="search" size="20"></u-icon>
            <view>沐浴露 </view>
          </view>
          <!-- <u-icon name="file-text-fill" size="30" color="#1D83E2" @tap="$u.route('/pages/components/empty/index')"></u-icon> -->
        </view>

        <u-grid :col="categoryList.length" :border="false" class="m-b-30" @click="$u.route('/jkdPages/catalogue/catalogue')">
          <u-grid-item v-for="(item, index) in categoryList" :key="index">
            <view class="m-t-20" :style="{ color: index == 0 ? '#1D83E2' : '#000' }">{{ item.name }}</view>
            <u-tag class="m-t-20" :text="item.desc" :plain="index != 0" size="mini" @click="$u.route('/jkdPages/catalogue/catalogue')"></u-tag>
          </u-grid-item>
        </u-grid>
      </view>
    </u-sticky>

    <view class="m-t-30">
      <rf-product-list :list="goodsList" :platform="source"></rf-product-list>
    </view>
    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
  </view>
</template>

<script>
var app = getApp()
import rfProductList from '@/components/rf-product-list'
export default {
  components: {
    rfProductList
  },
  data() {
    return {
      hasLoading: false,
      oneBannerList: [],
      twoBannerList: [],
      threeBannerList: [],
      fourBannerList: [],
      fiveBannerList: [],
      sixBannerList: [],

      col: 5,
      merchantServices: [],

      categoryList: [], // 分类列表
      goodsList: [],
      more: 'more',
      source: 'jd',
      current: 1,
      opt: {}
    }
  },
  onLoad(opt) {
    this.opt = app.getopts(opt)

    this.initData()

    this.hasLoading = true
    setTimeout(() => {
      this.hasLoading = false
    }, 1000)
  },
  onReachBottom() {
    this.getGoodsList(this.source)
  },
  methods: {
    initData() {
      this.getMenuList()
      this.getAllSwiper()
      this.getNavList()
      this.getGoodsList(this.source)
    },
    async getAllSwiper() {
      await uni.$u.http
        .post('shop-banner/brandAllTypeBanner')
        .then(data => {
          const { oneBannerList, twoBannerList, threeBannerList, fourBannerList, fiveBannerList, sixBannerList } = data
          this.oneBannerList = oneBannerList
          this.twoBannerList = twoBannerList
          this.threeBannerList = threeBannerList
          this.fourBannerList = fourBannerList
          this.fiveBannerList = fiveBannerList
          this.sixBannerList = sixBannerList
        })
        .catch(err => {
          uni.$u.toast(err)
        })
    },
    async getMenuList() {
      await uni.$u.http.post('shop-icon-setting/getIconBrandPage').then(data => {
        this.merchantServices = data
      })
    },
    async getNavList() {
      await uni.$u.http.post('unionapi/getplatform').then(data => {
        this.categoryList = data.list
      })
    },
    // 轮播图跳转
    clickSwiper(index) {
      let url = this.oneBannerList[index].url
      if (uni.$u.test.url(url)) {
        uni.$u.route('/pages/index/webView', {
          url
        })
      }
    },
    clickSwiper1(index) {
      let url = this.twoBannerList[index].url
      if (uni.$u.test.url(url)) {
        uni.$u.route('/pages/index/webView', {
          url
        })
      }
    },
    clickSwiper2(index) {
      let url = this.threeBannerList[index].url
      if (uni.$u.test.url(url)) {
        uni.$u.route('/pages/index/webView', {
          url
        })
      }
    },
    clickSwiper3(index) {
      let url = this.fourBannerList[index].url
      if (uni.$u.test.url(url)) {
        uni.$u.route('/pages/index/webView', {
          url
        })
      }
    },
    clickSwiper4(index) {
      let url = this.fiveBannerList[index].url
      if (uni.$u.test.url(url)) {
        uni.$u.route('/pages/index/webView', {
          url
        })
      }
    },
    clickSwiper5(index) {
      if (index == 0) {
        uni.$u.route('/jkdPages/online/online')
      } else {
        uni.$u.route('/jkdPages/happy/happy')
      }
    },
    async getGoodsList(source) {
      let obj = {
        current: this.current,
        size: 10,
        source
      }
      await uni.$u.http.post('unionapi/goodsJingxuan', obj).then(data => {
        this.current += 1
        this.goodsList = [...this.goodsList, ...data.list]
        data.list.length < 10 ? (this.more = 'nomore') : (this.more = 'more')
      })
    },
    jumpTo(obj) {
      if (obj.iconType === 0) {
        uni.$u.toast('敬请期待！')
      } else if (obj.iconType === 1) {
        // 外部url,内部浏览器打开,不需要token
        // #ifdef APP-PLUS
        // const result = await this.$mStore.dispatch('permission/requestPermissions', 'ACCESS_FINE_LOCATION')

        // if (result !== 1) return
        // #endif
        uni.$u.route('/pages/index/webView', {
          url: encodeURIComponent(obj.url),
          title: obj.title
        })
      } else if (obj.iconType === 2) {
        // 2为应用内部链接地址
        uni.$u.route(obj.url)
      } else if (obj.iconType === 3) {
        // 外部链接外部打开不需要token
        /*  #ifdef WEB  */
        window.location.href = obj.url
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(obj.url)
        /*  #endif  */
      } else if (obj.iconType === 4) {
        // 外部url,内部浏览器打开,需要token
        // #ifdef APP-PLUS
        // const result = await this.$mStore.dispatch('permission/requestPermissions', 'ACCESS_FINE_LOCATION')
        // if (result !== 1) return
        // #endif

        //确保token没有过期
        uni.$u.route('/pages/index/webView', {
          url: encodeURIComponent(obj.url),
          token: true,
          title: obj.title
        })
      } else if (obj.iconType === 5) {
        var app = getApp()
        // 外部链接外部打开需要token
        let num = obj.url.indexOf('?')
        let url = null
        num === -1 ? (url = obj.url + '?token=' + app.globalData.gtktoken) : (url = obj.url + '&token=' + app.globalData.gtktoken)
        /*  #ifdef WEB  */
        window.location.href = url
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(url)
        /*  #endif  */
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.brandDriving-page {
  width: 100%;
  position: absolute;

  /* 模拟搜索 start */
  .search-simulate {
    width: 650rpx;
    height: 64rpx;
    background-color: rgba(250, 250, 250, 0.6);
    border-radius: 10rpx;
    color: #fff;
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 0 22rpx;
    font-size: 26rpx;

    .line {
      border-left: 2rpx solid #fff;
      padding-left: 22rpx;
    }
  }

  .about-shadow {
    background-color: #fff;
    margin: -80rpx 25rpx 30rpx;
    padding: 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .zaiXian {
    width: 700rpx;
    height: 298rpx;
    margin: 30rpx auto;
    background-image: url('@/static/img/dfffw.png');
    background-size: cover;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .menu2 {
    margin: 30rpx auto;
    display: flex;
    justify-content: space-evenly;

    .menu2-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .dian-can {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30rpx;

    .dian-can-item {
      width: 344rpx;
      height: 243rpx;

      background-size: cover;
    }

    .dian-can-left {
      background-image: url('@/static/img/dfffs.png');
    }

    .dian-can-right {
      background-image: url('@/static/img/dffa.png');
    }
  }

  .jtt-title {
    width: 100%;
    background-color: #fff;
    overflow: hidden;

    .jtt-title-search {
      width: 600rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 25rpx;
      background-color: #f2f2f2;
      padding: 0 30rpx;
      display: flex;
    }
  }
}
</style>
